import {
    Breadcrumb,
    Input,
    Button,
    Select, Switch,
    Table, Space, Popconfirm
} from 'antd'
import { ReloadOutlined } from '@ant-design/icons'
import styles from './index.less'
import CommonFooter from '@/components/CommonFooter';
import React, { useEffect, useState } from 'react';
import { SearchModelState, useDispatch, useSelector } from 'umi';
import { ISearchList } from '@/types';

const { Option } = Select;

function Search() {
    const dispatch = useDispatch();
    // 分页配置
    const paginationProps: any = {
        onChange: (page: number) => handlePageChange(page), //改变页码的函数   
    }
    const [page, setPage] = useState(1);
    function handlePageChange(page: any) {
        setPage(page);
    }
    // 请求数据
    useEffect(() => {
        dispatch({
            type: 'search/getSearchList',
            payload: page
        })
    }, [page])
    // 获取数据
    const { searchList, selectSearchList } = useSelector((state: { search: SearchModelState }) => state.search);
    interface objType {
        id:string,
        key: string,
        count: string,
        keyword: string,
        createAt: string,
        updateAt: string,
        type:string
    }
    interface newlistType {
        count: string,
        keyword: string,
        createAt: string,
        updateAt: string,
        type:string,
        id:string,
        key:string
    }
    const newList:newlistType[] = JSON.parse(JSON.stringify(searchList));
   
    const obj = [] as any;
    newList.forEach((item, index) => {
        obj.push({
            id:item.id,
            key: item.id,
            count: item.count,
            keyword: item.keyword,
            createAt: item.createAt,
            updateAt: item.updateAt,
            type:item.type
        })
    })



    const columns = [

        {
            title: '搜索词',
            dataIndex: 'keyword',
        },
        {
            title: '搜索量',
            dataIndex: 'count',
            render: (count: any) => (
                <p className={styles.viewStyle}>
                    {count}
                </p>
            )
        },
        {
            title: '搜索时间',
            dataIndex: 'createAt',
        },
        {
            title: '操作',
            key: 'action',
            render: (text: any) => (
                <Space size="middle">
                    <Popconfirm placement="top" title={'确认删除？'}
                        okText="确认" cancelText="取消" onConfirm={() => delfirm(text)} >
                        <a style={{ color: 'rgb(93,152,255)' }}>删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    // 删除接口

    async function delfirm(text: ISearchList) {
        console.log(text, 'text......');

        await dispatch({
            type: 'search/delSearchList',
            payload: text.id
        })

        await dispatch({
            type: 'search/getSearchList',
            payload: page
        })

    }

    // 设置多选框
    const [selectedRowKey, changeSelectedRowKeys] = useState([]);
    // 改变多选框
    function onSelectChange(selectedRowKeys: string[] | number[]) {
    };
    // 将单选框赋值
    const rowSelection = {
        selectedRowKey,
        onChange: (selectedRowKeys: any) => {
            changeSelectedRowKeys(selectedRowKeys);
        }

    };

    // 筛选搜索
    const [type, setType] = useState('');
    const [keyword, setKeyword] = useState('');
    const [count, setCount] = useState('');

    function pageTypeChange(e: React.ChangeEvent) {
        setType((e.target as HTMLInputElement).value)
    }
    function pageKeywordChange(e: React.ChangeEvent) {
        setKeyword((e.target as HTMLInputElement).value)
    }
    function pageNumChange(e: React.ChangeEvent) {
        setCount((e.target as HTMLInputElement).value)
    }
    function searchEvent() {

        dispatch({
            type: 'search/selectSearchList',
            payload: {
                type,
                keyword,
                count,
            }
        })
    }
    // 重置
    function resetEvent() {

    }


    return <div className={styles.page}>
        <div className={styles.top}>
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="/">工作台</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>搜索记录</Breadcrumb.Item>
            </Breadcrumb>
        </div>
        <div className={styles.main}>
            <div className={styles.search}>
                <div className={styles.form}>
                    <div>
                        <div>
                            <div>
                                <label htmlFor="pageType">类型:</label>
                            </div>
                            <div>
                                <Input type="text" placeholder='请输入页面类型' id='pageType' onChange={pageTypeChange} />
                            </div>
                        </div>
                        <div>
                            <div>
                                <label htmlFor="pageWord">搜索词:</label>
                            </div>
                            <div>
                                <Input type="text" placeholder='请输入搜索词' id='pageWord' onChange={pageKeywordChange} />
                            </div>
                        </div>
                        <div>
                            <div>
                                <label htmlFor="pageNum">搜索量:</label>
                            </div>
                            <div>
                                <Input type="text" placeholder='请输入搜索量' id='pageNum' onChange={pageNumChange} />
                            </div>
                        </div>
                    </div>

                    <div className={styles.btns}>
                        <Button type='primary'>
                            <span onClick={searchEvent}>搜索</span>
                        </Button>
                        <Button>
                            <span onClick={resetEvent}>重置</span>
                        </Button>
                    </div>
                </div>

            </div>
            <div className={styles.con}>
                <div className={styles.con_top}>
                    <span><ReloadOutlined /></span>
                </div>
                <div className={styles.con_table}>

                    <Table
                        rowSelection={rowSelection}
                        columns={columns}
                        dataSource={selectSearchList.length ? selectSearchList : obj}
                        pagination={paginationProps}

                    />


                </div>
            </div>
            <div>
                <CommonFooter></CommonFooter>
            </div>
        </div>

    </div>
}
export default Search